import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { useState, useEffect } from "react";
import { Editor, Toolbar } from "@wangeditor/editor-for-react";
import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
import "./index.css";
import { Form, Input, Select, Space, Button } from "antd";
import { getCategory, getLabel, publishArticle } from "@/utils/back/index";

function ArticlePublishing() {
  // -----------编辑框相关配置------------
  // editor 实例
  const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法

  // 编辑器内容
  const [html, setHtml] = useState("<p>hello</p>");

  // 模拟 ajax 请求，异步设置 html
  useEffect(() => {
    setTimeout(() => {
      setHtml("<p>hello world</p>");
    }, 1500);
  }, []);

  // 工具栏配置
  const toolbarConfig: Partial<IToolbarConfig> = {}; // TS 语法

  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    // TS 语法
    placeholder: "请输入内容...",
  };

  // 及时销毁 editor ，重要！
  useEffect(() => {
    return () => {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  // -----------表单相关配置------------
  const { Option } = Select;

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };
  const [form] = Form.useForm();

  const onGenderChange = (value: string) => {
    console.log("value1", value);
  };
  // 发布
  const onFinish = (values: any) => {
    console.log("values2", html, values);
    const data = {
      content: html,
      title: values.title,
      categoriesId: values.class,
      tagsId: values.tags.join(","),
      time: new Date().toLocaleString(),
    };
    console.log("data", data);
    publishArticle(data).then((res: any) => {
      console.log(res);
    });
  };
  const onReset = () => {
    form.resetFields();
  };
  // ------请求分类，标签数据------------
  const [category, setCategory] = useState([]);
  const [label, setLabel] = useState([]);
  useEffect(() => {
    getCategory().then((res: any) => {
      console.log(res);
      setCategory(res.data);
    });
    getLabel().then((res: any) => {
      console.log(res);
      setLabel(res.data);
    });
  }, []);
  return (
    <div className="editor-container">
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          paddingRight: "28px",
          width: "100%",
        }}
      >
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
          {/* 标题 */}
          <Form.Item name="title" label="标题" rules={[{ required: true }]}>
            <Input style={{ width: "220px" }} />
          </Form.Item>
          {/* 分类 */}
          <Form.Item name="class" label="分类" rules={[{ required: true }]}>
            <Select
              onChange={onGenderChange}
              allowClear
              style={{ width: "220px" }}
            >
              {category.map((item: any) => {
                return (
                  <Option value={item.categoriesId} key={item.categoriesId}>
                    {item.categoryName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          {/* 标签 */}
          <Form.Item
            name="tags"
            label="标签"
            rules={[
              {
                required: true,
                message: "'tags' is required",
                type: "array",
              },
            ]}
          >
            <Select
              mode="multiple"
              placeholder="Please select tags"
              style={{ width: "220px" }}
            >
              {label.map((item: any) => {
                return (
                  <Option value={item.tagsId} key={item.tagsId}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Space>
              <Button type="primary" htmlType="submit">
                发布
              </Button>
              <Button htmlType="button" onClick={onReset}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
      <div style={{ border: "1px solid #ccc", zIndex: 100 }}>
        <Toolbar
          editor={editor}
          defaultConfig={toolbarConfig}
          mode="default"
          style={{ borderBottom: "1px solid #ccc" }}
        />
        <Editor
          defaultConfig={editorConfig}
          value={html}
          onCreated={setEditor}
          onChange={(editor) => setHtml(editor.getHtml())}
          mode="default"
          style={{ height: "450px", overflowY: "hidden" }}
        />
      </div>
    </div>
  );
}

export default ArticlePublishing;
